<template>
	<view class="page">
		<!-- bar start -->
		<view class="cu-bar tabbar bg-white">
			<view class="action" @click="handleTarbar('home')">
				<view class="cuIcon-cu-image">
					<image src="../../static/home1.png" v-if="component == 'home'"></image>
					<image src="../../static/home.png" v-else></image>
				</view>
				<view class="text-999" :class="{'text-theme':component == 'home'}">{{i18n['首页']}}</view>
			</view>
			<view class="action" @click="handleTarbar('goods')">
				<view class="cuIcon-cu-image">
					<image src="../../static/goods1.png" v-if="component == 'goods'"></image>
					<image src="../../static/goods.png" v-else></image>
				</view>
				<view class="text-999" :class="{'text-theme':component == 'goods'}">{{i18n['全部商品']}}</view>
			</view>
			<!-- <view class="action" @click="handleTarbar('cate')" v-if="is_hidden != '1'"> -->
				<view class="action" @click="handleTarbar('cate')">
				<view class="cuIcon-cu-image">
					<image src="../../static/cate1.png" v-if="component == 'cate'"></image>
					<image src="../../static/cate.png" v-else></image>
					<!-- <view class="cu-tag badge">99</view> -->
				</view>
				<view class="text-999" :class="{'text-theme':component == 'cate'}">{{i18n['商品分类']}}</view>
			</view>
			<view class="action" @click="handleTarbar('customer')">
				<view class="cuIcon-cu-image">
					<image src="../../static/customer1.png" v-if="component == 'customer'"></image>
					<image src="../../static/customer.png" v-else></image>
					<!-- <view class="cu-tag badge"></view> -->
				</view>
				<view class="text-999" :class="{'text-theme':component == 'customer'}">{{i18n['联系客服']}}</view> 
			</view>
		</view>
		<!-- bar end -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				component: 'home',
				is_hidden: '1'
			}
		},
		mounted() {
			this.is_hidden = global.thirdConfig ? global.thirdConfig.is_hidden : 1;
			console.log(this.is_hidden, 'this.is_hiddenthis.is_hiddenthis.is_hidden')
		},
		methods: {
			handleTarbar(data) {
				this.component = data;
				console.log(data)
				this.$emit('change', data);
			}
		}
	}
</script>

<style scoped lang="scss">
	// 定位 start
	.page {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999999;

	}

	.cu-bar.tabbar {
		position: relative;

		&::after {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 1px;
			background: #EEEEEE;
			transform: scaleY(0.5);
		}
	}

	// 定位 end
	// 颜色 start
	.text-333 {
		&.text-color {
			color: #FF6688;
		}
	}

	// 颜色 end
	// 修改图片大小 start
	.cu-bar.tabbar .action .cuIcon-cu-image {
		width: 48rpx;
		height: 48rpx;
		margin: 0 auto 6rpx;
	}

	// 修改图片大小 end
</style>
